<script setup>
import {onMounted, ref} from "vue";
import {ElMessageBox} from "element-plus";
import RoleFormDialog from "@/pages/system/role/component/Form.vue"
import {pageList, add, edit, deleteById , bindPermissions} from '@/api/system/role.js'
import PermissionSelector from "@/components/system/permission-selector.vue";
import {listByRoleId as sysMenuListByRoleId} from '@/api/system/menu.js'

defineOptions({
  name: '/system/role'
})

//状态枚举类
const statusEnum = ref([
  {label: "启用", value: 1 },
  {label: "禁用", value: 2 },
])

//角色集合
const roleData = ref([])

//角色类
const role = ref({
  id: "",
  name: "",
  code: "",
  content: "",
  status: "",
  createTime: ""
})

//搜索类
const search = ref({
  name: "",
  status: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

//搜索表单实例
const searchFormRef = ref(null)

const roleFormDialogVisible = ref(false)
const roleFormDialogTitle = ref("新增")

const permissionSelectorVisible = ref(false)
const permissionSelectorSelected = ref([])

//分页列表请求
const requestPageList = async () => {
  const resp = await pageList(search.value)
  search.value.total = Number.parseInt(resp.data.total)
  roleData.value = resp.data.data
}

onMounted(() => {
  requestPageList()
})

//监听重置事件
const onReset = () => {
  search.value.pageNum = 1
  searchFormRef.value.resetFields()
  requestPageList()
}

//监听搜索事件
const onSearch = () => {
  search.value.pageNum = 1
  requestPageList()
}

//监听新增事件
const onAdd = () => {
  roleFormDialogTitle.value = "新增"
  roleFormDialogVisible.value = true
  role.value = {
    id: "",
    name: "",
    conde: "",
    introduction: "",
    status: "",
    createTime: ""
  }
}

//监听编辑事件
const onEdit = (rowData) => {
  roleFormDialogTitle.value = "编辑"
  role.value = {...rowData}
  roleFormDialogVisible.value = true
}

//监听删除事件
const onDelete = (rowData) => {
  ElMessageBox.confirm("您确定删除这条数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteById(rowData.id).then(() => {
      requestPageList()
    })
  }, () => {})
}

//监听页码变化事件
const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
}

//处理表单提交事件
const handleRoleFormDialogConfirm = async (data) => {
  if (data.id) {
    await edit(data)
  } else {
    await add(data)
  }
  await requestPageList()
  roleFormDialogVisible.value = false
}

//权限分配
const grantPermission = (rowData) => {
  role.value = rowData
  sysMenuListByRoleId(rowData.id).then(resp => {
    permissionSelectorSelected.value = []
    if (resp.data) {
      permissionSelectorSelected.value = resp.data.map(item => item.id)
    }
    permissionSelectorVisible.value = true
  })
}

//权限分配事件
const permissionSelectorSelect = (data) => {
  bindPermissions(role.value.id, data).then(() => {
    permissionSelectorVisible.value = false
  })
}
</script>

<template>
<div class="cb-main-container">
  <div class="search-box cb-common-box">
    <el-form :model="search" inline ref="searchFormRef">
      <el-form-item prop="name" label="名称">
        <el-input v-model="search.name" placeholder="请输入角色名称"/>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-select v-model="search.status" placeholder="请选择状态" style="width: 200px">
          <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="main-box cb-common-box">
    <div>
      <el-button icon="Plus" @click="onAdd" type="primary">新增</el-button>
    </div>
    <el-table class-name="cb-table-box" :data="roleData" size="large">
      <el-table-column type="index" label="ID"/>
      <el-table-column property="name" label="角色名" />
      <el-table-column property="code" label="编码" />
      <el-table-column property="content" label="简介" show-overflow-tooltip/>
      <el-table-column property="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'primary' : 'info'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="320px">
        <template #default="scope">
          <el-button icon="Edit" link type="primary" @click="onEdit(scope.row)" v-show="scope.row.id !== '1'">编辑</el-button>
          <el-button icon="Edit" link type="primary" @click="grantPermission(scope.row)" v-show="scope.row.id !== '1'">权限分配</el-button>
          <el-button icon="Delete" link type="danger" @click="onDelete(scope.row)" v-show="scope.row.id !== '1'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="search.total" style="margin-top: 16px" @current-change="handleCurrentChange" />
  </div>
  <!-- 新增/编辑 S -->
  <role-form-dialog
      v-model:visible="roleFormDialogVisible"
      :title="roleFormDialogTitle"
      :data="role"
      @confirm="handleRoleFormDialogConfirm"></role-form-dialog>
  <!-- 新增/编辑 E -->

  <!-- 权限选择器 S -->
  <permission-selector
      v-model:visible="permissionSelectorVisible"
      :selected="permissionSelectorSelected"
      @select="permissionSelectorSelect" />
  <!-- 权限选择器 E -->
</div>
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
